<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport"
          content="width=device-width,user-scalable=no, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>预签约详情</title>
    <%- include('./_global/baseLibs') %>
    <link rel="stylesheet" href="/static/css/mycontract.css"/>
    <!--处理版本低于IE9的浏览器，支持IE7、IE8,使用Flash实现-->
    <!--[if lt IE 9]>
    <script ype="text/javascript" src="/static/lib/flashcanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/static/lib/jSignature.js"></script>

</head>
<style>
    html, body {
        background: #fff;
    }

    /* 电子签名 */
    .dzqm_box {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 99;
        background: rgba(0, 0, 0, 0.5);
        top: 0;
        left: 0;
    }

    .dzqm_content {
        position: absolute;
        width: 90%;
        height: 60%;
        margin: 0 auto;
        top: 20%;
        left: 5%;
        background: #fff;
        z-index: 999;

    }

    .close_dzqm {
        width: 60px;
        float: right;
        text-align: center;
        margin-top: 5px;
    }

    .dzqm_border {
        border: 1px solid #ccc;
        width: 90%;
        margin: 0 auto;
        height: 75%;
        /* overflow: hidden; */
    }

    #signature {
        width: 100%;
        height: 100%;
    }

    .jSignature {
        height: 90% !important;
    }

    .dzqm_btn {
        height: 2.3rem;
        line-height: 2.3rem;
        display: block;
        border: 1px solid #087cff;
        color: #087cff;
        border-radius: 4px;
        font-size: 1rem;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        background: transparent;
        -webkit-tap-highlight-color: transparent;
        width: 30%;
        margin: 1rem 2rem;
    }

    .dzqm_btnl {
        float: left;
    }

    .dzqm_btnr {
        float: right;
    }

    /* 合同 */
    .xymbContent {
        zoom: .5;
    }
    .xymbContent table tbody tr td:nth-child(1) {
        width: 26% !important;
    }

    .xymbContent .panel > div {
        width: 100% !important;
    }

    #xymb_qmtp {
        display: block;
        height: 68px !important;
    }
    .xq-list .xymbContent .panel:nth-child(4) {
        overflow: hidden;
    }
    .xymbContent .xxUl li {
        width: 60%;
    }

</style>

<body>
<section class="page-wrap yqy-page">
    <header class="header-box grey fixed">
        <div class="header-content">
            <div class="left-tool">
                <a class="back" href="javascript:void(0);"><i class="iconfont icon-back"></i></a>
            </div>
            <div class="title">预签约详情</div>
        </div>
    </header>
    <!--header end-->
    <div class="xq-list">
    </div>

    <div class="tj-btn-box">
        <a class="qd-btn" style="display: none;">确定</a>
        <a class="qm-btn" style="display: none;">签名</a>
        <a class="qr-btn" style="display: none;">确认签约</a>
        <!--  <a href="预签约确认.html">确定</a> -->
    </div>

    <div class="dzqm_box" style="display:none">
        <div class="dzqm_content">
            <div class="close_dzqm">关闭</div>
            <fieldset class="dzqm_border">
                <legend>签名区域</legend>
                <div id="signature">
                </div>
            </fieldset>
            <button type="button" id="signatureReset" class="dzqm_btn dzqm_btnl">
                重置签名
            </button>
            <button type="button" id="signatureOutput" class="dzqm_btn dzqm_btnr">
                提交签名
            </button>
            <div>
            </div>
        </div>
    </div>
</section>
</body>
<script type="text/javascript">
    var action = "XYMB", qyxxid = "", fwbids = "";
    $(function () {

    });



    /**预签约申请，获取协议模版*/
    function initXymbXYMB(result) {
        var body = $(result.content);
        $(".xq-list").append(body);
        $(".tj-btn-box").find(".qd-btn").show();
    }

    /**预签约确认，医生审核通过后，获取完整的签约协议，并需要电子签名*/
    function initXymbQYXYNR(result) {
        var body = $(result.content);
        $(".xq-list").append(body);
        var xyxx = result.xyxx;

        var xymbData = page_yqyxq.jsonUpperKey(xyxx);
        xymbData.FWBIDS = fwbids;
        XymbMethod.initXymbData(xymbData);
        console.log( $(".tj-btn-box").find(".qm-btn"));
        $(".tj-btn-box").find(".qm-btn").show();
    }

    /**预签约完成，获取包含电子签名的签约协议*/
    function initXymbQYXY(result) {
        var content = $(result.content);
        // var body = $(contentt);
        $(".xq-list").append(content);
        $(".tj-btn-box").find(".qd-btn").show();
    }



    function sjFormatter(sj) {
        if (sj) {
            sj = sj.substr(0, 10);
            sj = sj.replace(/([0-9]{4})-([0-9]{2})-([0-9]{2})/, '$1年$2月$3日');
            return sj;
        }
        return sj;
    }

    var page_yqyxq = (function($, page_yqyxq) {

        function initView() {
            $(".qd-btn").on("click", function () {
                $.QuickUrlUtils.redirectJSBridge({url: "/html/gzd/signService/qyls.html", title: "签约详情"});
                history.back();
            });
            $(".qr-btn").on("click", function () {
                var content = $(".xq-list").html();
                content = encodeURIComponent(content);
                var data = $(".xq-list").data();
                var xyxx = data.xyxx;
                var param = {};
                param.content = content;
                param.qyxxid = xyxx.qyxxid;
                param.jmxxid = xyxx.jmxxid;
                param.ptjgid = xyxx.yljgid;
                param.yljgmc = xyxx.yljgmc;
                param.tdid = xyxx.yltdid;
                param.tdmc = xyxx.qytdmc;
                param.ysid = xyxx.usid;
                param.ysxm = xyxx.qyys;
                param.xyh = xyxx.xyh;

                XymbMethod.saveXymbAgo();//保存之前，调用协议中到方法，将数据保存到html的节点中
                $.QuickRemote.AjaxJson({
                    funcName: "/api/gzd/qyfw/submitQyqrToJkcs",
                    callback: page_yqyxq.submitQyqrToJkcsHandler,
                    params: param
                });
            });
        }

        function submitQyqrToJkcsHandler(result) {
            if (result.state == "true") {
                $.QuickAlert.alertNormal("签约成功！", {
                    callback: function () {
                        $.QuickUrlUtils.redirectJSBridge({type: "qyfw", url: "/html/common/signService/qyls.html", title: "签约历史"})
                    }
                });
            } else {
                $.QuickAlert.alertFail({content: "操作失败，请稍后重试！"});
            }
        }

        function initSignature() {
            var $sigdiv = $("#signature");
            $(".qm-btn").on("click", function () {
                var init = $(".dzqm_box").attr('init');
                $(".dzqm_box").show();
                if (init == 1) {
                    $sigdiv.jSignature("reset");
                } else {
                    $sigdiv.jSignature();
                    $(".dzqm_box").attr('init', 1);
                }
            });
            $(".jSignature").css({"width": "100%", "height": "90%"});

            function signatureReset() {
                $sigdiv.jSignature("reset");
            }

            function signatureOutput() {
                //获取数据
                var datapair = $sigdiv.jSignature("getData", "image"); //设置输出的格式
                //图片展示
                var pic = "data:" + datapair[0] + "," + datapair[1];
                if (pic) {
                    $(".dzqm_box").hide();
                    $.QuickAlert.alertNormal("签名成功！", {
                        callback: function () {
                            page_yqyxq.getQmImg(pic);
                            $sigdiv.html("");
                        }
                    });
                }
            }

            $("#signatureOutput").click(function () {
                if ($sigdiv.jSignature('getData', 'native').length == 0) {
                    $.QuickAlert.alertFail({content: "签名不能为空！"});
                }
                else {
                    signatureOutput();
                }
            })
            $("#signatureReset").click(function () {
                signatureReset();
            })

            $(".close_dzqm").on("click", function () {
                $(".dzqm_box").hide();
                $('body').css({
                    "overflow-x": "auto",
                    "overflow-y": "auto"
                });
            })

        }

        //TODO: 这个方法，就是用户在画板签名完成后，关闭画板的回调，方法接收签名图片的base64字符串
        function getQmImg(base64) {
            var img = $("#xymb_qmtp");//协议模版中，有一个img标签占位，把图片base64设置到img中显示即可显示签名图片
            img.attr("src", base64);
            img.css({"display": "block", "height": 68 + "px"});
            img.show();
            $(".tj-btn-box").find(".qr-btn").show();
            $(".tj-btn-box").find(".qm-btn").hide();
        }

        function initData() {
            $.QuickRemote.AjaxJson({
                funcName: "/api/gzd/qyfw/queryJtqyXymb",
                params: {
                    action: action,
                    qyxxid: qyxxid
                },
                callback: function (result) {
                    $(".xq-list").data(result);
                    eval("initXymb" + action + "(result)");
                }
            });
        }
        function jsonUpperKey(json) {
            var result = {};
            for(var key in json){
                var upperKye = key.toLocaleUpperCase();
                result[upperKye] = json[key];
            }
            return result;
        }

        var cfg_def = {
            initView: initView,
            submitQyqrToJkcsHandler: submitQyqrToJkcsHandler,
            initSignature: initSignature,
            getQmImg: getQmImg,
            initData: initData,
            jsonUpperKey: jsonUpperKey,
        }

        page_yqyxq.init = function(cfg){
            $.extend(page_yqyxq, cfg_def, cfg);
            action = $.QuickUrlUtils.getRequest("action") || "XYMB";
            qyxxid = $.QuickUrlUtils.getRequest("qyxxid") || "";
            fwbids = $.QuickUrlUtils.getRequest("fwbids") || "";
            page_yqyxq.initView();
            page_yqyxq.initSignature();
            page_yqyxq.initData();

        }

        return page_yqyxq;
    })(jQuery, {});
    
</script>
</html>